<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>VQ3信息综合平台</title>
    <link rel="Shortcut Icon" href="/static/Img/PageImg/Canva_small_pageIcon.png" sizes="16*16" type="image/x-icon">
    <script type="text/javascript" src="/static/Js/jQuery-3.5.1.js"></script>
    <script type="text/javascript" src="/static/Js/IsIe.js"></script>
    <link rel="stylesheet" href="/static/Css/CommonStyles.css">
    <script type="text/javascript" src="/static/Js/bootstrap/popper.js"></script>
    <script type="text/javascript" src="/static/Js/bootstrap/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="/static/Js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/Js/LocalDateUtil.js"></script>
    <script type="text/javascript" src="../static/Js/Login.js"></script>
    <script type="text/javascript" src="/static/Js/watermark.js"></script>
    <link rel="stylesheet" href="/static/Css/bootstrap.min.css">
    <style>
        .registerDiv ,.LoginModel{
            width: 50%;
            left: 50%;
            transform: translate(-50%,50%);
            position: absolute;
        }
        #registerForm,#LoginForm{
            position: absolute;
            margin-top: 10em;

        }
        .registerDiv{
            visibility: hidden;
        }
        .reRandom{
            position: absolute;
            margin-top: -2em;
            margin-left: 24em;
            border:none;
        }
        .checkCode{
            margin-top: -4em;
            margin-left: 22em;
            height: 40px;
            width: 100px;
            border: white 1px solid;
            border-radius: 5px;
        }
        .check{
            width: 20em;
        }
        .registerBtn{
            position: absolute;
            left: 7em;
        }
        .loginBtn{
            position: absolute;
            left: 1em;
        }
        .passwordHidden{
            position: absolute;
            margin-top: -2em;
            margin-left: 27em;
        }
        .text-muted{
            left: 0;
            position: relative;
            float: right;
        }
        .errorMsg{
            color: red;
            text-align: center;
            width: 100%;
            position: absolute;
            margin-top: -2em;
        }
        .downloadBtn{
            visibility: hidden;
            left: 13em;
            width: auto;
        }
    </style>
</head>
<body onload="IEVersion()">
<!--register-->
<div class="registerDiv" id="registerDiv" >
    <form id="registerForm" action="/register/saveUser" method="post" accept-charset="utf-8">
        <div class="form-group">
            <label for="userID">账号</label>
            <input type="text" style="width: 30em" onblur="userIdcheck(this)" class="form-control" id="userID" aria-describedby="emailHelp">
            <button type="button" id="reRandom" class="reRandom" onclick="randomInt()">换一个</button>
            <small id="text-muted" class="form-text text-muted">系统随机生成,可自定义账号,字母与数字随意组合</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input onblur="checkRePassword(this)" type="password" style="width: 30em" class="form-control" id="exampleInputPassword1">
            <img onclick="pwHidden(this)" name="exampleInputPassword1" class="passwordHidden" id="registerPasswordHidden" src="/static/Img/PageImg/passwordHidden.png" width="40" height="30">
        </div>
        <small id="pwText-muted" class="form-text text-muted">密码格式:字母与数字随意组合,7-17位</small>
        <div class="form-group">
            <label for="REexampleInputPassword1">确认密码</label>
            <input onblur="reCheckRePw(this)" type="password" style="width: 30em" class="form-control" id="REexampleInputPassword1">
            <img onclick="pwHidden(this)" name="REexampleInputPassword1" class="passwordHidden" id="RepasswordHidden" src="/static/Img/PageImg/passwordHidden.png" width="40" height="30">
        </div>
        <button type="button" onclick="submitCheck()" id="registerBtn" class="btn btn-primary registerBtn">注册</button>
        <button type="button" class="btn btn-primary loginBtn" onclick="gotoLogin()">登录</button>
        <button type="button" id="downloadBtn" class="btn btn-primary loginBtn downloadBtn" onclick="download()">保存账号与密码</button>
    </form>
</div>
<!--login-->
<div class="LoginModel" id="LoginModel">

    <form id="LoginForm" action="/login" method="post" accept-charset="utf-8">
        <small class="errorMsg" id="errorMsg" ></small>
        <div class="form-group">
            <label for="username">账号</label>
            <input type="text" style="width: 30em" class="form-control" name="username" id="username" placeholder="登录账号或邮箱">
        </div>
        <div class="form-group">
            <label for="password">密码</label>

            <input type="password" style="width: 30em" class="form-control" name="password" id="password">
            <img onclick="pwHidden(this)" name="password" class="passwordHidden" id="passwordHidden" src="/static/Img/PageImg/passwordHidden.png" width="40" height="30">
        </div>
        <div class="form-group">
            <label for="check">验证码</label>
            <input type="text" class="form-control check" name="check"  id="check">
            <span><img src="CC/checkCode" class="checkCode" id="checkCode" alt="" onclick="refresh()"></span>
        </div>
        <button type="button" class="btn btn-primary registerBtn" onclick="gotoRegister()" >注册</button>
        <button type="button" onclick="login()" class="btn btn-primary loginBtn" >登录</button>
    </form>
</div>
<script>
    function gotoRegister() {
        document.getElementById("LoginModel").style.visibility = "hidden"
        document.getElementById("registerDiv").style.visibility = "visible"
    }
    $(function (){
        randomInt()
    })
    var userId;
    function randomInt() {

        let intArr = [0,1,2,3,4,5,6,7,8,9]
        userId = '';
        let num = 8;
        for (let i = 0; i < num; i++) {
            userId+= intArr[Math.floor(Math.random() * 10)];
        }
        $.post("/register/checkUserID",{userId:userId},function (result) {
            console.log(result)
            if (result){
                document.getElementById("userID").value = userId;
            }else {
                randomInt();
            }
        })

    }
    var pw;
    function checkRePassword(obj){
        pw = '';
        pw = document.getElementById(obj.id).value
        let reg = /^\w{7,16}$/
        if (!reg.test(pw)){
            document.getElementById("registerBtn").style.visibility = "hidden"
            document.getElementById("pwText-muted").innerText = "密码不合法,请检查！"
            document.getElementById(obj.id).focus()
        }else {
            document.getElementById("registerBtn").style.visibility = "visible"
            document.getElementById("pwText-muted").innerText = "密码格式:字母与数字随意组合,7-17位"
        }
    }
    function reCheckRePw(obj) {

        let RePw = document.getElementById(obj.id).value
        let reg = /^\w{7,16}$/
        if (!reg.test(RePw)){
            document.getElementById("registerBtn").style.visibility = "hidden"
            document.getElementById("pwText-muted").innerText = "密码不合法,请检查！"
            document.getElementById(obj.id).focus()
        }else {
            document.getElementById("registerBtn").style.visibility = "visible"
            if (pw !== RePw) {
                document.getElementById("pwText-muted").innerText = "两次输入的密码不相同，请检查！"
                document.getElementById("registerBtn").style.visibility = "hidden"
                document.getElementById(obj.id).value = '';

            }else {
                document.getElementById("registerBtn").style.visibility = "visible"
                document.getElementById("pwText-muted").innerText = "密码格式:字母与数字随意组合,7-17位"
            }
        }
    }
    function userIdcheck(obj) {
        let reg = /^[A-Za-z0-9]{7,16}$/
        let userId = document.getElementById("userID").value

            if (!reg.test(userId)){
                document.getElementById("registerBtn").style.visibility = "hidden"
                document.getElementById("text-muted").innerText = "账户允许字符:数字,大写字母,小写字母,且最少8位,最多17位"
                document.getElementById(obj.id).focus()

            }else {
                document.getElementById("registerBtn").style.visibility = "visible"
            $.post("/register/checkUserID",{userId:userId},function (result) {
                if (result.flag){
                    document.getElementById("text-muted").innerText = "已验证，可以使用！"
                    document.getElementById("registerBtn").style.visibility = "visible"
                }else {
                    document.getElementById("text-muted").innerText = "用户名重复"
                    document.getElementById("userID").focus()
                    document.getElementById("registerBtn").style.visibility = "hidden"
                }
            })
            }

    }
    var index = 0
    function pwHidden(obj) {
        index++
        /*index双为hide,*/
        if (index % 2 !== 0) {
            document.getElementById(obj.id).setAttribute("src","/static/Img/PageImg/passwordLook.png")

            if (obj.name === "exampleInputPassword1"){
                document.getElementById("exampleInputPassword1").setAttribute("type","text")
            }
            if (obj.name === "password"){
                document.getElementById("password").setAttribute("type","text")
            }
            if (obj.name === "REexampleInputPassword1"){
                document.getElementById("REexampleInputPassword1").setAttribute("type","text")
            }

        }else {
            document.getElementById(obj.id).setAttribute("src","/static/Img/PageImg/passwordHidden.png")
            if (obj.name === "exampleInputPassword1"){
                document.getElementById("exampleInputPassword1").setAttribute("type","password")
            }
            if (obj.name === "password"){
                document.getElementById("password").setAttribute("type","password")
            }
            if (obj.name === "REexampleInputPassword1"){
                document.getElementById("REexampleInputPassword1").setAttribute("type","password")
            }
        }
    }
    function submitCheck(){
        userIdcheck()
        let rePw = document.getElementById("REexampleInputPassword1").value
        console.log(pw)
        console.log(rePw)
        let reg = /^[A-Za-z0-9]{7,16}$/
        let userId = document.getElementById("userID").value
        if (reg.test(userId) && reg.test(pw) && reg.test(rePw)){
            $.post("/register/saveUser",{userId:userId,pw:pw,rePw:rePw},function (result) {
                document.getElementById("downloadBtn").style.visibility = "visible"
            })
        }else {
            document.getElementById("pwText-muted").innerText = "输入不合法,请检查！"
            return false;
        }
    }
    function gotoLogin() {
        document.getElementById("LoginModel").style.visibility = "visible"
        document.getElementById("registerDiv").style.visibility = "hidden"
        document.getElementById("registerBtn").style.visibility = "hidden"
        document.getElementById("downloadBtn").style.visibility = "hidden"
    }
    function login() {
        let username = document.getElementById("username").value
        let password = document.getElementById("password").value
        let check = document.getElementById("check").value
        if (username !== null && username !== ''){
            if (password !== null && password !== ''){
                if (check !== null && check !== ''){
                    $.post("/login",{username:username,password:password,check:check},function (result) {
                        if (result.flag) {
                            window.location.href = "index.html"
                        }else {
                            refresh()
                            document.getElementById("errorMsg").innerHTML = result.errorMsg
                        }
                    })
                }else {
                    document.getElementById("errorMsg").innerHTML = "验证码不能为空！"
                }
            }else {
                document.getElementById("errorMsg").innerHTML ="密码不能为空！"
            }
        }else {
            document.getElementById("errorMsg").innerHTML ="账户不能为空！"
        }
    }


    function download() {

        let userId = document.getElementById("userID").value

        let text = ['账号：'+userId+'\n密码：'+pw]

        let element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', "VQ3信息综合平台注册密码本");

        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);
        window.location.reload()
    }




    // 调用
    __canvasWM({
            content: 'VQ3'
    });



</script>
</body>
</html>